/**
 * 控制指令编辑框
 */
import React, { Component } from 'react';
import { Button, message } from 'antd';
import cass from 'classnames';
import { productCommandQuery, addProductCommand, updateProductCommand, deleteProductCommand } from '../../../services/product';
import { isSuccess } from '../../../configs/error';
import css from '../../../themes/index.less';
import Control from './control';

const styles = {
	main: {
		display: 'block',
		padding: '0',
		lineHeight: '2'
	},
	b: {
		float: 'right'
	},
	title: {
		fontSize: '18px'
	},
};

const commandType = 'CONTROL';

class ControlEditBox extends Component {
	state = {
		data: [
			{
				commandName: '',
				displayName: '',
				name: '',
				type: '',
				value: ''
			}
		]
	}

	async componentWillMount() {
		const { productId } = this.props;
		if (productId) {
			// 获取当前产品的控制指令列表
			const res = await productCommandQuery({ commandType, productId });
			if (isSuccess(res)) {
				this.setState({
					data: res.data.map(d => {
						const { command, isShow, name: commandName, id } = d;
						let com = {};
						try {
							com = JSON.parse(command);
						} catch (error) {
							message.error(`解析控制指令${name}出错`);
						}
						const { displayName, name, type, value } = com;
						return { id, commandName, isShow, displayName, name, type, value: JSON.stringify(value) };
					})
				});
			}
		}
	}

	add = () => {
		const { data } = this.state;
		this.setState({
			data: [{
				commandName: '',
				displayName: '',
				name: '',
				type: '',
				value: ''
			}].concat(data)
		});
	}

	save = async data => {
		const { commandName, isShow, ...com } = data;
		const newCommand = {
			command: JSON.stringify(com),
			commandType,
			name: commandName,
			productId: this.props.productId,
			isShow
		};
		let res = null;
		if (data.id) {
			// 修改
			newCommand.id = data.id;
			res = await updateProductCommand(newCommand);
		} else {
			// 新增
			res = await addProductCommand(newCommand);
		}
		if (isSuccess(res)) this.componentWillMount();
	}

	delete = async id => {
		// 删除
		const { data } = this.state;
		const res = await deleteProductCommand(id);
		if (isSuccess(res)) {
			message.success('删除成功');
			this.setState({ data: data.filter(d => d.id !== id) });
		}
	}

	cancel = index => {
		const { data } = this.state;
		this.setState({
			data: data.filter((d, i) => i !== index)
		});
	}

	render() {
		const { data } = this.state;
		const { show, dataPoint } = this.props;
		styles.main.display = show ? 'block' : 'none';
		return (
			<div style={styles.main}>
				<div className={cass(css.layout, css.lr)}>
					<div>设置控制指令</div>
					<div className={css.right}>
						<Button style={styles.b} onClick={this.add} icon="plus" className="opt-but">添加</Button>
					</div>
				</div>
				<div style={styles.box}>
					{data.map((d, i) => (
						<Control
							key={d.id}
							index={i}
							dataPoint={dataPoint}
							data={d}
							name={d.commandName}
							save={this.save}
							delete={this.delete}
							cancel={this.cancel}
						/>
					))}
				</div>
			</div>
		);
	}
}

ControlEditBox.propTypes = {

};

export default ControlEditBox;
